<template>
    <div class="app-container">
      <div class="filter-container">
                          <el-input v-model="listQuery.condition.roleName" size="small" text="角色名称" placeholder="角色名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
                  <el-input v-model="listQuery.condition.roleCode" size="small" text="角色代码" placeholder="角色代码" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-button v-waves class="filter-item" size="small" type="primary"  icon="el-icon-search" @click="handleFilter">
          查询
        </el-button>
        <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
          新增
        </el-button>
      </div>

      <el-table
        :data="tableData"
        border
        v-loading="listLoading"
        :height="tableHeight"
        header-row-class-name="table-header-background"
        style="width: 100%">
          <el-table-column
                  prop="roleName"
                  label="角色名称"
                  width="150">
          </el-table-column>
          <el-table-column
                  prop="roleCode"
                  label="角色代码"
                  width="150">
          </el-table-column>
          <el-table-column
                  prop="description"
                  label="备注"
                  width="">
          </el-table-column>

        <el-table-column label="操作" align="center" width="350" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button type="warning" size="mini" @click="handleAllocatePermission(row)">
              分配角色
            </el-button>
            <el-button v-if="row.valid == 0" size="mini" type="success" @click="handleModifyStatus(row, 1)">
              启用
            </el-button>
            <el-button v-if="row.valid == 1" size="mini" @click="handleModifyStatus(row, 0)">
              禁用
            </el-button>
            <el-button type="danger" size="mini" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

      <el-dialog title="新增"  :visible.sync="dialogFormVisible">
        <el-form ref="dataForm" :rules="rules" :model="tempData" label-position="right" label-width="100px" style="width: 400px; margin-left:50px;">
              <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="tempData.roleName" placeholder="请输入角色名称" />
              </el-form-item>
              <el-form-item label="角色代码" prop="roleCode">
                <el-input v-model="tempData.roleCode" placeholder="请输入角色代码" />
              </el-form-item>
              <el-form-item label="备注" prop="description">
                <el-input v-model="tempData.description" placeholder="请输入备注" />
              </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="optionFlag === 'add' ? createData() : (optionFlag === 'update' ? updateData() : null)">
            确认
          </el-button>
        </div>
      </el-dialog>

      <el-dialog title="分配全西安"  width="500px" :visible.sync="dialogAllocatePermissionFormVisible">
        <el-form :model="upmsRolePermission" label-width="80px" label-position="left">
          <el-form-item label="权限">
            <el-tree
              ref="tree"
              :data="rolePermissions"
              :props="defaultProps"
              node-key="id"
              show-checkbox
              highlight-current
              :default-checked-keys="upmsRolePermission.permissionIdList"
            />
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAllocatePermissionFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="doAllocatePermission()">
            确认
          </el-button>
        </div>
      </el-dialog>
    </div>

</template>


<script>

    import { listUpmsRole, addUpmsRole, editUpmsRole, delUpmsRole } from '@/api/upms/role/index'
    import waves from '@/directive/waves' // waves directive
    import { treePermissionByRoleId, allocatePermission } from '@/api/upms/rolePermission/index'
    import Pagination from '@/components/Pagination' // secondary package based on el-pagination
    import { Message } from 'element-ui'

    export default {
        name: "index.vue"
      , components: { Pagination }
      ,  directives: { waves }
      , data() {
        return {
          upmsRolePermission:{
            permissionIdList:[]
          },
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          dialogAllocatePermissionFormVisible:false,
          rolePermissions:[],
          total: 0,
          tableHeight: window.innerHeight - 205,
          tableData: null,
          listLoading: true,
          optionFlag: null,
          listQuery: {
            page: 1,
            limit: 20,
            condition: {
                roleName:null,
                roleCode:null,
                description:null,
                valid:null,
                deleted:null,
                version:null,
                createTime:null,
                updateTime:null,
                createUser:null,
                updateUser:null,
            }
          },
          dialogFormVisible:false, // 是否显示模态框
          rules: {
            roleName: [{ required: true, message: '名称不能为空', trigger: 'change' }],
            roleCode: [{ required: true, message: '编码不能为空', trigger: 'change' }],
          },
          tempData:{
            roleName:null,
            roleCode:null,
            description:null,
            valid:null,
            deleted:null,
            version:null,
            createTime:null,
            updateTime:null,
            createUser:null,
            updateUser:null,
          }
        }
      }
      , created() {
        this.getList()
      }
      , methods : {
        handleFilter() {
          this.getList();
        }
        , handleCreate() {
          this.resetTemp()
          this.dialogFormVisible = true
          this.optionFlag = "add"
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        }
        , handleUpdate(row) {
          this.optionFlag = "update"
          this.tempData = Object.assign({}, row) // copy obj
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        }
        , handleDelete(row) {
          delUpmsRole(row).then(response => {
            if (response.result) {
              Message({
                message: response.msg,
                type: 'success',
                duration: 5 * 1000
              })
            }
            this.getList();
          })
        }
        , resetTemp() {
          this.tempData = {
          roleName:null,
          roleCode:null,
          description:null,
          valid:null,
          deleted:null,
          version:null,
          createTime:null,
          updateTime:null,
          createUser:null,
          updateUser:null,
          }
          this.optionFlag = null
        }
        , createData() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              addUpmsRole(this.tempData).then(response => {
                this.dialogFormVisible = false
                if (response.result) {
                  Message({
                    message: response.msg,
                    type: 'success',
                    duration: 5 * 1000
                  })
                }
                this.getList();
              })
            }
          })
        }
        , updateData() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              editUpmsRole(this.tempData).then(response => {
                this.dialogFormVisible = false
                if (response.result) {
                  Message({
                    message: response.msg,
                    type: 'success',
                    duration: 5 * 1000
                  })
                }
                this.getList();
              })
            }
          })
        }
        , handleModifyStatus(row, valid) {
          let updateUpmsRole = {
            id : row.id,
            version:row.version,
            valid : valid
          }
          editUpmsRole(updateUpmsRole).then(response => {
            if (response.result) {
              Message({
                message: response.msg,
                type: 'success',
                duration: 5 * 1000
              })
            }
            this.getList();
          })
        }
        , handleAllocatePermission(row) {
          this.upmsRolePermission.upmsRoleId = row.id;
          treePermissionByRoleId({upmsRoleId:row.id}).then(response => {
            this.dialogAllocatePermissionFormVisible = true;
            if (response.result) {
              this.rolePermissions = response.data.treeNode.children;
              this.upmsRolePermission.permissionIdList = response.data.checkedKeys;
            }
          })
        }
        , doAllocatePermission() {
          const checkedKeys = this.$refs.tree.getCheckedKeys();
          this.upmsRolePermission.permissionIdList = checkedKeys;
          allocatePermission(this.upmsRolePermission).then(response => {
            if (response.result) {
              Message({
                message: response.msg,
                type: 'success',
                duration: 5 * 1000
              })
            }
            this.dialogAllocatePermissionFormVisible=false;
            this.upmsRolePermission = {};
          })
        }
        , getList() {
          this.listLoading = true
          listUpmsRole(this.listQuery).then(response => {
            this.tableData = response.data.data
            this.total = response.data.total

            setTimeout(() => {
              this.listLoading = false
            }, 0.5 * 1000)
          })
        }
      }
    }
</script>

<style scoped>

</style>
